<template>
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="item in list" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside">
			<view v-for="item in listright" :key="item.id" class="s-list" >
				<image @click="navToList(item.id)" :src="item.cover_pic" class="item-pic"></image>
				<text class="s-item">{{item.name}}</text>
				<view class="price">
					<view class="price-cen">
						<text class="price-tip">￥</text>
						<text class="price-num">{{item.price}}</text>
					</view>
					<image @click="navToCart()" class="price-img" src="../../static/tabbar/gouwuche2.png"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import url from '../../components/hosturl.js';
	export default {
		data() {
			return {
				currentId: 1,
				list:[],
				listright:[],
			}
		},
		onLoad(){
			this.loadData();
		},
		methods: {
			async loadData(){
				uni.request({
					url:url+'/Classify/getClassification',
					data:{},
					method:'get',
					success:(res)=>{
						 //console.log(res.data.message);
						  this.list=res.data.message;
						  this.tabtap(this.list[0]);   //先执行第一个元素  
					}
					
				})
				
			},
			//一级分类点击
			tabtap(item){
				uni.request({
					url:url+'/Classify/getDetailClass',
					data:{
						id:item.id
					},
					method:'get',
					success:(res)=>{
						 //console.log(res.data.message);
						 this.listright=res.data.message;
						 this.currentId = item.id;
						 
					}
					
				})
				
			},
			
			navToList(id){
				uni.navigateTo({
					url: `/pages/classify/product?id=`+id,
				})
			},
			navToCart(){
				uni.switchTab({
					url: `/pages/cart/cart`
				})
			}
		}
	}
</script>

<style lang='scss'>
	page,.content {
		height: 100%;
		background-color: #f8f8f8;
	}
	.item-pic{ height: 200rpx;width: 100%; }
	
	.s-list{ width: 50%;float: left;padding-bottom:20rpx; }
	.s-list:nth-child(2n+2) { padding-left:20rpx; } 
	.price{ display: flex;align-items: center;justify-content: space-between; }
	.price-cen{ color: #a387eb;flex: 4;padding-left: 20rpx; }
	.price-tip{ font-size: 24rpx; }
	.price-num{ font-size: 40rpx; }
	.price-img{ flex: 1;height: 40rpx;width: 36rpx; }
	
	

	.content {
		display: flex;
	}
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		&.active{
			color: $base-color;
			background: #f8f8f8;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 2;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding:20upx;
	}
	.s-item{
	  display: inline-block;
	  line-height: 50upx;
	  padding:0 20rpx;
	  font-size: 32upx;
	  width: 98%;
	  color: $font-color-dark;
	  overflow: hidden;
	     text-overflow: ellipsis;
	     white-space: nowrap;
	 }
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;
		
		image{
			width: 140upx;
			height: 140upx;
		}
	}
</style>
